import { useState } from 'react'
import {
  Button,
} from 'antd'
import {

  ProCard,

} from '@ant-design/pro-components';

import EditModal from './components/EditModal'
import { EditOutlined } from '@ant-design/icons';


const WesternMedicine = ({
  user,
  upDataUser,
  type,
}) => {

  const [isOpen, setIsOpen] = useState<Boolean>(false)

  function handleModal(bool: Boolean) {
    if (!bool) {
      upDataUser()
    }
    setIsOpen(bool)
  }

  return (
    <ProCard hoverable split="horizontal" style={{ backgroundColor: '#1990ff', color: 'white' }}>
      <EditOutlined onClick={() => handleModal(true)}></EditOutlined>
      {
        isOpen &&
        <EditModal
          isOpen={isOpen}
          type={type}
          user={user}
          handleModal={handleModal}
        />
      }
    </ProCard>
  )

}


export default WesternMedicine;